import React, { useRef, useEffect, useMemo } from 'react';
import { connect } from 'dva';
import { Link, Route, Switch } from 'dva/router';
import { Radio, Card, Button, Tag } from 'antd';
import {
    ArrowUpOutlined,
    ArrowDownOutlined,
    DownloadOutlined,
} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import style from '@/pages/IndexPage.css';


function EffLineChart({ title, data, currentParam }) {
    let textColor = 'rgba(0, 0, 0, 0.85)';
    let obj = {}, seriesData = [], categoryData = [];
    Object.keys(data).sort((a,b)=>{
        return a < b ? -1 : 1 ;
    }).forEach((key, index)=>{
        categoryData.push(key);
        Object.keys(data[key]).forEach(type=>{
            if ( !obj[type] ) {
                obj[type] = [data[key][type]];
            } else {
                obj[type].push(data[key][type])
            }
        })
         
    });
    Object.keys(obj).forEach(type=>{
        seriesData.push({
            type:'line',
            name:type,
            showSymbol:false,
            itemStyle:{ color: type === '同比' ? '##951aef' : '#023bfe'},
            areaStyle:{
                color:{
                    type:'linear',
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:[
                        { offset:0, color: type === '同比' ? 'rgba(149, 25, 239, 0.15)' : 'rgba(2, 59, 254, 0.15)' },
                        { offset:1, color:'transparent' }
                    ]
                }
            },
            data:obj[type],
            z:10
        })
    })
    
   
    return (
        
            <ReactEcharts
                notMerge={true}
                style={{ height: '100%' }}
                option={{
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: 14,
                        },
                        left: 20,
                        top: 10,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer:{
                            type:'line',
                            label:{
                                backgroundColor:'#fff'
                            }
                        }
                    },
                    
                    grid:{
                        top:80,
                        left:20,
                        right:20,
                        bottom:20,
                        containLabel: true,
                    },
                    xAxis: {
                        type:'category',
                        axisTick:{ show:false },
                        axisLine:{ show:false },
                        data:categoryData 
                    },
                    yAxis: {
                        type: 'value',
                        name: currentParam.unitName || '',
                        splitArea: {
                            show: false,
                        },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#f0f0f0',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(0, 0, 0, 0.65)',
                        }
                    },
                    
                    series:seriesData
                }}
            />
    );
}

export default React.memo(EffLineChart);
